<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <v-breadcrumbs :items="breadcrumbs">
      <template v-slot:divider>
        <v-icon>forward</v-icon>
      </template>
    </v-breadcrumbs>
    <v-container fluid fill-height grid-list-md>
      <v-layout row wrap>
        <v-flex xs12>
          <v-tabs v-model="tabActive[0]" dark color="blue lighten-1" slider-color="yellow">
            <v-tab v-for="item in physicalFitness.basic" :key="item.name" ripple>{{item.name}}</v-tab>
            <v-tab-item v-for="item in physicalFitness.basic" :key="item.name">
              <v-card flat color="white">
                <v-card-title primary class="headline">
                  <v-layout justify-space-between align-center>
                    <div class="headline">{{item.name}}</div>
                    <v-btn flat icon v-on:click="showBasicChangeDialog(item.name,item.comment)">
                      <v-icon dark>edit</v-icon>
                    </v-btn>
                  </v-layout>
                </v-card-title>
                <v-card-text>
                  <div class="title">类型</div>
                  <v-divider class="mt-1"/>
                  <div>{{item.label}}</div>
                  <div class="title mt-5">评价</div>
                  <v-divider class="mt-1"/>
                  <div>{{item.comment}}</div>
                </v-card-text>
              </v-card>
            </v-tab-item>
          </v-tabs>
        </v-flex>
        <v-flex xs12>
          <v-tabs v-model="tabActive[1]" dark color="blue lighten-1" slider-color="yellow">
            <v-tab v-for="item in physicalFitness.extra" :key="item.name" ripple>{{item.name}}</v-tab>
            <v-tab-item v-for="item in physicalFitness.extra" :key="item.name">
              <v-card flat color="white">
                <v-card-title primary class="headline">
                  <v-layout justify-space-between align-center>
                    <div class="headline">{{item.name}}</div>
                    <v-btn flat icon v-on:click="showExtraChangeDialog(item.name,item.sub)">
                      <v-icon dark>edit</v-icon>
                    </v-btn>
                  </v-layout>
                </v-card-title>
                <v-card-text>
                  <div class="title">类型</div>
                  <v-divider class="mt-1"/>
                  <div>{{item.label}}</div>
                  <div class="title mt-5">评价</div>
                  <v-divider class="mt-1"/>
                  <div v-for="item in item.sub" :key="item.level">
                    <div class="subheading mt-2">{{item.level}}</div>
                    <div>{{item.comment}}</div>
                    <v-divider class="mt-1"/>
                  </div>
                </v-card-text>
              </v-card>
            </v-tab-item>
          </v-tabs>
        </v-flex>
      </v-layout>
    </v-container>
    <v-dialog v-model="changeDialog.basic.visible" max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">{{changeDialog.basic.title}}</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-layout wrap>
              <v-flex xs12>
                <v-textarea v-model="changeDialog.basic.comment" auto-grow label="评价" rows="1"></v-textarea>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="changeDialog.basic.visible=false">关闭</v-btn>
          <v-btn color="blue darken-1" flat @click="submitPhysicalFitness('basic')">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="changeDialog.extra.visible" max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">{{changeDialog.extra.title}}</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-layout wrap>
              <v-flex v-for="item in changeDialog.extra.sub" :key="item.name" xs12>
                <v-textarea v-model="item.comment" auto-grow :label="item.level" rows="1"></v-textarea>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="changeDialog.extra.visible=false">关闭</v-btn>
          <v-btn color="blue darken-1" flat @click="submitPhysicalFitness('extra')">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { getPhysicalFitness, postPhysicalFitness } from '../../api/comment'
export default {
  name: 'PhysicalFitness',
  data: () => ({
    breadcrumbs: [
      {
        text: '评语信息',
        disabled: true
      },
      {
        text: '身体素质',
        disabled: true
      }
    ],
    tabActive: [null, null],
    physicalFitness: {
      basic: [],
      extra: []
    },
    changeDialog: {
      basic: {
        visible: false,
        title: '',
        comment: ''
      },
      extra: {
        visible: false,
        title: '',
        sub: ''
      }
    }
  }),
  mounted () {
    getPhysicalFitness().then((res) => {
      this.physicalFitness.basic = res.data.basic
      this.physicalFitness.extra = res.data.extra
    })
  },
  methods: {
    showBasicChangeDialog (title, comment) {
      this.changeDialog.basic.title = title
      this.changeDialog.basic.comment = comment
      this.changeDialog.basic.visible = true
    },
    showExtraChangeDialog (title, sub) {
      this.changeDialog.extra.title = title
      this.changeDialog.extra.sub = []
      for (let i = 0; i < sub.length; i++) {
        this.changeDialog.extra.sub.push({
          level: sub[i].level,
          comment: sub[i].comment
        })
      }
      this.changeDialog.extra.visible = true
    },
    submitPhysicalFitness (type) {
      let data
      switch (type) {
        case 'basic':
          data = {
            name: this.changeDialog.basic.title,
            comment: this.changeDialog.basic.comment
          }
          break
        case 'extra':
          data = {
            name: this.changeDialog.extra.title,
            sub: this.changeDialog.extra.sub
          }
          break
        default:
          return
      }
      postPhysicalFitness(type, data).then((res) => {
        this.changeDialog.basic.visible = false
        this.changeDialog.extra.visible = false
        getPhysicalFitness().then((res) => {
          this.physicalFitness.basic = res.data.basic
          this.physicalFitness.extra = res.data.extra
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
